<template>
  <div class="learun-sidebar" :style="{'width':lr_isCollapse?'':`${lr_theme.sideWidth}px`,'padding-top':['side3'].includes(lr_theme.nav)?'':`${lr_theme.headerHeight}px`}">
    <header-logo v-if="['side3'].includes(lr_theme.nav)" ref="topLogo" />
    <div v-if="!['side3'].includes(lr_theme.nav)"  class="learun-sidebar__collapse" @click="setCollapse">
      <i :class="lr_isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
    </div>
    <div class="learun-sidebar__menu">
      <my-menu :popperClass="popperClass" :type="menuType" />
    </div>
  </div>
</template>

<script>
import MyMenu from "../menu/menu";
import HeaderLogo from "../header/logo.vue";
export default {
  components: { MyMenu,HeaderLogo },
  data() {
    return {}
  },
  computed: {
    popperClass(){
      if(['mix','side2'].includes(this.lr_theme.nav) || ['white','blue'].includes(this.lr_theme.colorType)){
        return 'learun-more-light-el-menu'
      }
      else{
        return 'learun-more-dark-el-menu'
      }
    },
    menuType(){
      if(['mix'].includes(this.lr_theme.nav) || ['white','blue'].includes(this.lr_theme.colorType)){
        return 'light'
      }
      else{
        return 'dark'
      }
    }
  },
  methods: {
    setCollapse() {
      this.$store.commit("app/SET_COLLAPSE");
    }
  }
};
</script>


